import React, { Fragment, useState, useEffect } from 'react';
import type { FC } from 'react';
import { Calendar, Badge, Drawer, Card } from 'antd';
import style from './index.less';
import { Liquid } from '@ant-design/charts';
import { getCommunityUserNum, userCont } from './service';
import { Tooltip } from 'bizcharts/node_modules/@antv/g2plot/lib/dependents';
const Choose: FC = () => {
  const [value, setValue] = useState(0);
  const [max, setMax] = useState(0);
  const getCommunity = async () => {
    await getCommunityUserNum({}).then(res => {
      setValue(Number(res.res[0].count));
    });
  };
  const getUser = async () => {
    await userCont({}).then(res => {
      setMax(res.data[0].count);
    });
  };
  useEffect(() => {
    getCommunity();
    getUser();
  }, []);
  console.log(value, max, '坦克');
  return (
    <div className={style.cal}>
      <Card
        title="社区活跃人数占比"
        bodyStyle={{ textAlign: 'center', fontSize: 0 }}
        bordered={false}
      >
        <Liquid
          height={161}
          min={0}
          max={max}
          value={value}
          forceFit
          //   padding={[0, 0, 0, 0]}
          statistic={{
            formatter: (value: any) => `${((Number(value) * 100) / Number(max)).toFixed(1)}%`,
          }}
        />
      </Card>
    </div>
  );
};
export default Choose;
